<template>
  <div>
    <p>id: {{$route.params.id}}</p>
    <p>title: {{$route.params.title}}</p>
    <p>id2: {{$route.query.id2}}</p>
    <p>title2: {{$route.query.title2}}</p>
    <p>props.a: {{a}}</p>
    <p>props.b: {{b}}</p>
    <p>props.id: {{id}}</p>
    <p>props.title: {{title}}</p>
    <p>props.c: {{c}}</p>
  </div>
</template>

<script>
export default {
  name: 'CourseItem',
  props: ['a', 'b', 'id', 'title', 'c'],

  // 监视$route的变化: 重新跳转到当前路由, 且params或query参数发生改变
  watch: {
    $route: {
      handler (value) {
        console.log(`根据${value.params.id}发请求获取详情信息`)
      },
      immediate: true, // 初始化就执行一次
    }
  }
}
</script>

<style scoped>

</style>
